<template>
  <div>
    <audio id="resultAiAudio" preload="auto" @error="playAudioEnd" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <section class="c-contexty-hidden c-contextX-scroll c-ws-n">
      <div v-for="i in totalNum" :key="i" @click="clickNum(i)" class="c-ww90 c-mr40 c-inlineblack c-hh34 c-lh34" :class="curIndex == i ? 'c-fw600 c-fc-xblack c-fs32':'c-fc-gray c-fs24'">
        <span class="c-p">
          第{{i}}题
        </span>
      </div>
    </section>
    <section v-if="resultInfo === null" class="c-flex-column c-flex-center c-pv20">
      <i class="iconfont icon-yewuyeicon05 c-fs60 c-fc-sgray"></i>
      <div class="c-fs24 c-fc-sgray c-pv10">暂无相关答案</div>
    </section>
    <section v-if="resultInfo" class="c-flex-row c-pt40 c-aligni-center">
      <div class="c-p">
        <img class="c-ww92 c-hh108" :src="require('@/assets/i/wap/clockIn/clock-level.png')" alt="">
        <div class="c-pa c-p-t26 c-fc-white c-fs36 c-p-l0 c-p-r0 c-center c-fw600 c-textAlign-c">
          {{Number(resultInfo.answerContent.score).toFixed(0)}}
        </div>
      </div>
      <!-- <div class="c-ww76 c-hh60 c-textAlign-c c-pt10 c-fs36 c-fc-white c-bg-xlyellow c-p c-fw-b">
        <span class="bottom-triangle c-pa"></span>
        <span class="bottom-triangle-text c-fs22 c-pa c-fw-b">分</span>
      </div> -->
      <div class="c-pl28 c-flex-grow1 c-w0">
        <div class="c-flex-row c-aligni-center">
          <span class="c-fs22 c-flex-grow1 c-w0 c-fc-gray">完整度:</span>
          <div :class="isSmallWidth ? 'c-ww200': 'c-ww260'" class="c-hh8 c-p c-bg-sgray c-br4">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 theme-bg c-br4" :style="'width:' + resultInfo.completion + '%'"></div>
          </div>
          <span class="c-fs20 c-pl24 c-fc-gray">{{completionLevel}}</span>
        </div>
        <div class="c-flex-row c-aligni-center c-mt6" v-if="resultInfo.fluencyScore!==''||resultInfo.fluencyScore!==null">
          <span class="c-fs22 c-flex-grow1 c-w0 c-fc-gray">流畅度:</span>
          <div :class="isSmallWidth ? 'c-ww200': 'c-ww260'" class="c-hh8 c-p c-bg-sgray c-br4">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 theme-bg c-br4" :style="'width:' + resultInfo.fluencyScore + '%'"></div>
          </div>
          <span class="c-fs20 c-pl24 c-fc-gray">{{fluencyScore}}</span>
        </div>
        <div class="c-flex-row c-aligni-center c-mt6" v-if="resultInfo.accuracyScore!==''||resultInfo.accuracyScore!==null">
          <span class="c-fs22 c-flex-grow1 c-w0 c-fc-gray">准确度:</span>
          <div :class="isSmallWidth ? 'c-ww200': 'c-ww260'" class="c-hh8 c-p c-bg-sgray c-br4">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 theme-bg c-br4" :style="'width:' + resultInfo.accuracyScore + '%'"></div>
          </div>
          <span class="c-fs20 c-pl24 c-fc-gray">{{accuracyScore}}</span>
        </div>
      </div>
    </section>
    <!-- 语音 -->
    <div v-if="resultInfo" class="c-pt30 c-flex-row c-aligni-center">
      <div @click="clickPlayAudio" class="c-ww166 c-hh60 c-br30 c-ph24 theme-bg-10 c-flex-row c-aligni-center">
        <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="!isPlayAudio" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
        <img class="c-ww30 c-hh30 c-rotate180" v-show="isPlayAudio" src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
        <!-- <div class="c-flex-grow1 c-w0 c-textAlign-r c-fs20 c-fc-white c-ph20">{{resultInfo.answerContent.recordTime}}"</div> -->
        <div class="box c-ww32">
          <div class="wifi-symbol">
            <div class="wifi-circle first theme-bd2"></div>
            <div class="wifi-circle second theme-bd2" :class="isPlayAudio?'seconAnimation':''"></div>
            <div class="wifi-circle third theme-bd2" :class="isPlayAudio?'thirdAnimation':''"></div>
          </div>
        </div>
        <div class="c-fs20 theme-fc">{{resultInfo.answerContent.recordTime}}"</div>
      </div>
    </div>
    <section v-if="resultInfo" class="c-pt20 c-fs24">
      <template v-if="resultInfo.answerContent.answer.length > 0">
        <span :class="item.score > 60 ? 'c-fc-deepGreen':'c-fc-xlred'" v-for="(item,index) in resultInfo.answerContent.answer" :key="index">
          {{resultInfo.answerContent.content.split(' ')[index]}}
        </span>
      </template>
      <template v-else>
        <span class="c-fc-xlred">{{resultInfo.content}}</span>
      </template>
    </section>
    <div class="c-fs24 c-fc-gray c-pt20" v-if="resultInfo && resultInfo.translate">
      {{resultInfo.translate}}
    </div>
    <div class="c-flex-row c-aligni-center c-pt20">
      <span class="c-ww16 c-hh16 c-bg-xgreen c-brp50"></span>
      <span class="c-fs24 c-fc-gray c-pl4 c-pr40">优秀</span>
      <span class="c-ww16 c-hh16 c-bg-lred c-brp50"></span>
      <span class="c-fs24 c-fc-gray c-pl4">待加强</span>
    </div>
  </div>
</template>


<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: "clockAswerAI",
  components: {},
  props: {
    curHwId: {
      type: String,
      default: ""
    },
    totalNum: {
      type: Number,
      default: 0
    },
    showAiResutl: {
      type: Boolean,
      default: false
    },
    examMainId: {
      type: String,
      default: ""
    },
    isSmallWidth: {
      type: Boolean,
      default: true
    },
    refereeId:{
      type: String,
      default: ""
    },
    clockInId:{
      type: String,
      default: ""
    },
  },
  watch: {
    showAiResutl: {
      handler(val) {
        if (val) {
          this.curIndex = 1;
          this.getResultInfo();
        }
      },
      immediate: true,
    }
  },
  data() {
    return {
      curIndex: 1,
      resultInfo: '',
      isPlayAudio: false,
      fluencyLevel: '',
      completionLevel: '',
      accuracyScore:'',
      fluencyScore:''
    };
  },

  methods: {
    getResultInfo() {
      this.resultInfo = '';
      utilJs.getMethod(`${global.apiurl}signCard/voiceAnswerSheet/${this.curHwId}?examMainId=${this.examMainId}&number=${this.curIndex}&refereeId=${this.refereeId}&curHwId=${this.curHwId}`, res => {
        this.isPlayAudio = false;
        if (!res.examInfo) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: this.clockInId ? "clockIn" : '',
              clockInId:this.clockInId,
              info: "该作业不存在！"
            }
          });
          return;
        }
        if (!res.examInfo) {
          this.resultInfo = null;
          return;
        }
        this.resultInfo = {
          accuracy: res.examInfo.accuracy,
          answerContent: res.examInfo.answerContent,
          fluency: Math.floor(res.examInfo.answerContent.fluency),
          completion: Math.floor(res.examInfo.answerContent.completion),
          fluencyScore: Math.floor(res.examInfo.answerContent.fluencyScore),
          accuracyScore: Math.floor(res.examInfo.answerContent.accuracyScore),
          contentAudioUrl: res.examInfo.contentAudioUrl,
          content: res.examInfo.content,
          isAnalyze: res.examInfo.isAnalyze,
          isCheckAnswer: res.examInfo.isCheckAnswer,
          isDisAgainSign: res.examInfo.isDisAgainSign,
          isReachTarget: res.examInfo.isReachTarget,
          totalpoins: Math.floor(res.examInfo.totalpoins * 1),
          translate: res.examInfo.translate,
          isIn:res.examInfo.isIn,
          lastHwId:res.examInfo.lastHwId,
          isShowCard:res.examInfo.isShowCard,
          dayCardStatus:res.examInfo.dayCardStatus

        };

        this.fluencyScore = this.scoreToLevel(this.resultInfo.fluencyScore);
        this.completionLevel = this.scoreToLevel(this.resultInfo.completion);
        this.accuracyScore = this.scoreToLevel(this.resultInfo.accuracyScore);
        document.getElementById('resultAiAudio').src = res.examInfo.answerContent.mp3Url;
        document.getElementById('resultAiAudio').load();
        this.$emit('InfoRes', res.examInfo, this.completionLevel, this.fluencyScore, this.accuracyScore)
        this.$emit('getInfo', this.resultInfo.isDisAgainSign)
      });
    },
    //分数转成级别 0-60 一般 ;60-80 良好;80-100 优秀
    scoreToLevel(score) {
      let level = '一般';
      switch (true) {
        case score * 1 < 60:
          level = '一般';
          break;
        case score * 1 >= 60 && score * 1 < 80:
          level = '良好';
          break;
        case score * 1 >= 80 && score * 1 <= 100:
          level = '优秀';
          break;
      }
      return level;
    },
    clickNum(index) {
      if (index == this.curIndex) {
        return;
      }
      this.curIndex = index;
      this.getResultInfo();
    },
    clickPlayAudio() {
      let audioDom = document.getElementById("resultAiAudio");
      if (!audioDom.src || this.isPlayAudio) {
        return;
      }
      this.isPlayAudio = true;
      if (utilJs.isWeiXin()) {
        try {
          document.addEventListener(
              "WeixinJSBridgeReady",
              function () {
                document.getElementById("resultAiAudio").play();
              },
              false
            );
            WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
              // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
              document.getElementById("resultAiAudio").play();
              console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
            });
        } catch (error) {
          // continue regardless of error
        }
      } else {
        audioDom.load();
        audioDom.play();
      }
    },
    playAudioEnd() {
      console.log('*****playAudioEnd****')
      this.isPlayAudio = false;
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bottom-triangle {
  top: 1.5rem;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0.95rem;
  border-style: solid;
  border-color: #fbb449 transparent transparent transparent;
}
.bottom-triangle-text {
  top: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
  /* background: linear-gradient(
    90deg,
    rgba(249, 185, 89, 1) 0%,
    rgba(249, 185, 89, 0.5) 100%
  ); */
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.c-p-t26{top:0.65rem;}
.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
</style>
